<template>
  <header class="header">
    <ul class="nav-box">
      <li
        v-for="item in listData"
        :key="item.t_plant_pk"
        :class="item.t_plant_pk == modelValue.t_plant_pk ? 'active' : ''"
        @mouseover="$emit('update:modelValue', item)"
        @click="$emit('update:modelValue', item)"
      >
        <span>{{ item.plant_name }}</span>
      </li>
    </ul>
    <button class="read-more" @click="handleClick">阅读更多</button>
  </header>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    modelValue: {
      type: Object,
    },
    listData: {
      type: Array,
    },
  },
  methods: {
    handleClick() {
      let routeObj = this.getListUrl({},this.modelValue);
      this.$router.push(routeObj);
    },
    
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--base-color);
  padding-right: 5px;
  margin-bottom: 10px;
}

.nav-box {
  display: flex;
  font-size: 110%;
  font-weight: 700;
}

.nav-box > li {
  line-height: 26px;
  cursor: pointer;
  color: #000;
}

.nav-box > li > span {
  padding: 0px 5px;
}

.nav-box > li:nth-child(1) {
  padding-left: 0px;
}

.nav-box > .active {
  color: var(--base-color);
  border-bottom: 2px solid var(--base-color);
}

.read-more {
  border: 1px dotted var(--base-color);
  border-radius: 5px;
  font-weight: 500;
  font-size: 80%;
  padding: 2px 3px;
  background-color: #fff;
  cursor: pointer;
}

.read-more:hover {
  color: #fff;
  background-color: var(--base-color);
}
</style>